<template>
  <!-- 查看回执 -->
  <div>
    <el-button
      type="primary"
      plain
      size="mini"
      icon="el-icon-view"
      class="common-addBtn"
      :disabled="disabled"
      @click="handleView"
      >查看回执</el-button
    >
    <el-dialog
      :title="resultTitle"
      :visible.sync="openResult"
      :close-on-click-modal="false"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="舱单回执" name="first"></el-tab-pane>
        <el-tab-pane label="确报回执" name="second"></el-tab-pane>
        <el-tab-pane label="海关作业单回执" name="fifth"></el-tab-pane>
        <el-tab-pane label="理货回执" name="third"></el-tab-pane>
        <el-tab-pane label="运抵回执" name="fourth"></el-tab-pane>
      </el-tabs>
      <basic-table
        ref="tableList"
        :columns="columns"
        :tableData="tableData"
        :total="total"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
        :loading="loading"
      >
        <!-- 回执状态 -->
        <template #code="scope">
          <dict-tag
            :options="dict.type.mft_response_code"
            :value="scope.row.code"
          ></dict-tag>
        </template>
        <!-- 回执状态 -->
        <template #messageType="scope">
          <dict-tag
            :options="dict.type.mft_decl_message_type"
            :value="scope.row.messageType"
          ></dict-tag>
        </template>
        <!-- 对象类型 -->
        <template #objType="scope">
          <dict-tag
            :options="dict.type.mft_response_obj_type"
            :value="scope.row.objType"
          ></dict-tag>
        </template>
        <!-- 对象类型 -->
        <template #opType="scope">
          <dict-tag
            :options="dict.type.mft_decl_op_type"
            :value="scope.row.opType"
          ></dict-tag>
        </template>
        <!-- 单证状态 -->
        <template #auditStatus="scope">
          <dict-tag
            :options="dict.type.sys_bill_audit_status"
            :value="scope.row.auditStatus"
          ></dict-tag>
        </template>
        <template #operate="scope">
          <div class="option-menu">
            <el-button
              type="text"
              size="mini"
              class="table-edit"
              @click="handleClickEdit(scope.index, scope.row)"
              v-hasPermi="['system:costStopConfig:edit']"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="mini"
              class="table-edit"
              @click="handleDelete(scope.index, tableData)"
              v-hasPermi="['system:costStopConfig:delete']"
            >
              删除
            </el-button>
          </div>
        </template>
      </basic-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="openResult = false" size="small">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getMftResponseMsg, findGBillsByTransitCode } from "@/api/bt/bmhs";
export default {
  name: "viewReponse",
  dicts: [
    "manifest_declare_status",
    "mft_response_obj_type",
    "mft_response_code",
    "mft_decl_message_type",
    "mft_decl_op_type",
    "sys_bill_audit_status"
  ],
  props: {
    disabled: {
      type: Boolean,
      default: true,
    },
    checkedId: {
      type: Array,
    },
  },
  data() {
    return {
      loading: false,
      openResult: false,
      resultTitle: "查看回执",
      activeName: "first",
      msgType: "MT_14_24",
      // 列表数据
      tableData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        transitCode: null,
      },
      total: 0,
      columns: [],
      columns1: [
        {
          prop: "manifestId",
          label: "批次号",
          align: "center",
          minWidth: 120,
        },
        {
          prop: "code",
          label: "回执状态",
          align: "center",
          minWidth: 100,
          slot: true,
        },
        {
          prop: "messageType",
          label: "申报报文类型",
          align: "center",
          minWidth: 200,
          slot: true,
        },
        {
          prop: "msg",
          label: "回执消息",
          align: "center",
          minWidth: 100,
        },
        {
          prop: "objType",
          label: "对象类型",
          align: "center",
          minWidth: 80,
          slot: true,
        },
        {
          prop: "opType",
          label: "操作类型",
          align: "center",
          minWidth: 100,
          slot: true,
        },
        {
          prop: "createTime",
          label: "回执时间",
          align: "center",
          minWidth: 140,
        },
      ],
      columns2: [
        {
          prop: "billCode",
          label: "单证编号",
          align: "center",
          minWidth: 150,
        },
        {
          prop: "transitCode",
          label: "运输批次号",
          align: "center",
          minWidth: 100,
        },
        {
          prop: "transportName",
          label: "车牌号",
          align: "center",
          minWidth: 100,
        },
        {
          prop: "icCard",
          label: "IC卡号",
          align: "center",
          minWidth: 100,
        },
        {
          prop: "auditStatus",
          label: "单证状态",
          align: "center",
          minWidth: 200,
          slot: true,
        },
        {
          prop: "auditDate",
          label: "回执时间",
          align: "center",
          width: 140,
        },
      ],
    };
  },
  methods: {
    handleView() {
      this.openResult = true;
      this.activeName = "first";
      this.msgType = "MT_14_24";
      this.getList();
    },
    handleClick() {
      this.tableData = [];
      this.total = 0;

      switch (this.activeName) {
        case "first":
          this.msgType = "MT_14_24";
          break;
        case "second":
          this.msgType = "MT_44";
          break;
        case "third":
          this.msgType = "MT_54";
          break;
        case "fourth":
          this.msgType = "MT_34";
          break;
        case "fifth":
          this.msgType = "ZYD";
          break;
      }
      this.getList();
    },
    getList() {
      this.loading = true;
      if (this.msgType === "ZYD") {
        //海关作业单回执
        this.columns = this.columns2;
        this.queryParams.transitCode = this.checkedId[0];
        findGBillsByTransitCode(this.queryParams)
          .then((res) => {
            if (res.code == 200) {
              this.tableData = [res.data];
              this.total = this.tableData.length;
            }
          })
          .finally(() => {
            this.loading = false;
          });
      } else {
        this.columns = this.columns1;
        getMftResponseMsg(this.checkedId[0], this.msgType)
          .then((res) => {
            if (res.code == 200) {
              this.tableData = res.rows;
              this.total = res.total;
            }
          })
          .finally(() => {
            this.loading = false;
          });
      }
    },
    // 分页
    handleSizeChange(val) {
      this.queryParams.pageSize = val.pageSize;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val.currentPage;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 10px 20px;
}
::v-deep .el-empty {
  padding: 10px 0;
}
::v-deep .el-empty__image {
  width: 80px !important;
}
::v-deep .el-empty__description {
  margin-top: 0;
  p {
    font-size: 12px;
  }
}
</style>
